.completed_details {
	// display: flex;
	// height: calc(100vh - 60px);
	// flex-direction: column;
	
	&_top {
		width: 100%;
		height: 40px;
		padding: 0px 20px;
		display: flex;
		align-items: center;
		
		.into_index {
			width: 100px;
			height: 28px;
			text-align: center;
			line-height: 28px;
			color: #101010;
			font-size: 14px;
			border: 1px solid #BBBBBB;
			position: relative;
			border-radius: 4px;
			cursor: pointer;
			
			i {
				top: 7px;
			}
		}
		
		i {
			position: absolute;
			right: 4px;
			top: 8px;
		}
		
		.current {
			width: 100px;
			height: 30px;
			text-align: center;
			line-height: 30px;
			background: #409EFF 10000%;
			border: 1px solid #fff;
			position: relative;
			font-size: 14px;
			color: #fff;
			margin-left: 10px;
			border-radius: 4px;
			cursor: pointer;
			
			&::before {
				content: '';
				display: inline-block;
				width: 10px;
				height: 10px;
				border-radius: 50%;
				background: #fff;
				position: absolute;
				left: 6px;
				top: 10px;
			}
		}
	}
	
	&_title {
		width: 100%;
		height: 90px;
		background: #F5F5F5;
		padding: 0px 20px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		
		&_left {
			color: #101010;
			font-size: 14px;
			
			i {
				color: #5692FA;
				font-style: normal;
			}
		}
		
		&_right {
			
			&_btn {
				width: 100px;
				height: 40px;
				text-align: center;
				line-height: 40px;
				border-radius: 4px;
				outline: none;
				border: 0 none;
				background: #27B148;
				color: #fff;
				cursor: pointer;
			}
		}
	}
	
	&_content {
		width: 100%;
		padding: 20px;
		flex: 1;
		overflow: auto;
		
		// 进度条
		&_top {
			width: 100%;
			height: 150px;
			display: flex;
			justify-content: center;
			
			.process {
				width: 1200px;
				height: 100%;
				position: relative;
				display: flex;
				justify-content: space-between;
				
				.progress {
					width: 96%;
					height: 6px;
					position: absolute;
					left: 24px;
					top: 47px;
					border-radius: 25px;
					background: #F2F3F7;
					
					&_box {
						width: 100%;
						height: 100%;
						background: #00D552;
						border-radius: 25px 0px 0px 25px;
					}
				}
				
				&_num {
					width: 80px;
					height: 100%;
					position: relative;
					z-index: 3;
					
					&_box {
						width: 100%;
						height: 50%;
						display: flex;
						flex-direction: column;
						justify-content: flex-end;
						align-items: center;
						
						.round {
							width: 50px;
							height: 50px;
							border-radius: 50%;
							background: #00D552;
							text-align: center;
							line-height: 50px;
							color: #fff;
							font-size: 14px;
						}
						
						.round_active {
							background-color: #F2F3F7;
							color: #ACACAC;
						}
					}
				
					&_title {
						width: 100%;
						height: 50%;
						display: flex;
						flex-wrap: wrap;
						justify-content: center;
						font-size: 14px;
						padding-top: 10px;
						
						&_text {
							text-align: center;
							color: #ACACAC;
						}
					}
				}
			}
		}
		
		&_center {
			width: 100%;
			margin-top: 20px;
			display: flex;
			border: 1px solid rgba(#101010,0.1);
			border-right: 0;
			
			&_left {
				flex: 1;
				height: 300px;
				padding: 30px;
				border-right: 1px solid rgba(#101010,0.1);
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				
				&_box {
					display: flex;
					font-size: 14px;
					margin-top: 5px;
					
					.left {
						width: 80px;
						text-align: left;
						color: #ACACAC;
					}
					
					.right {
						display: flex;
						justify-content: center;
						align-items: center;
						
						i {
							display: block;
							width: 16px;
							height: 16px;
							margin-left: 6px;
							border: 1px solid rgba(#101010,0.4);
							border-radius: 50%;
							background: #fff;
							font-size: 6px;
							text-align: center;
							line-height: 14px;
							color: rgba(#101010,0.4);
							font-style: normal;
							cursor: pointer;
						}
					}
					
					
					font {
						display: inline-block;
						width: 50px;
						margin-left: 6px;
						color: #25A9FB;
						cursor: pointer;
					}
					
					.right_active {
						color: #25A9FB;
					}
					
					&:first-child {
						margin-top: 0;
					}
				}
				
				.botton {
					width: 120px;
					margin-top: 20px;
					
					&_btn {
						padding: 3px;
						border-radius: 2px;
						background: #25A9FB;
						font-size: 14px;
						color: #fff;
						cursor: pointer;
					}
				}
			}
			
			&_right {
				flex: 1;
				height: 300px;
				padding: 30px;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				border-right: 1px solid rgba(#101010,0.1);
				
				&_top {
					font-size: 14px;
					color: #ACACAC;
					
					font {
						font-size: 22px;
						color: #00D552;
						font-weight: 700;
					}
				}
				.expressBox{
					width: 750px;
					display: flex;
					overflow-y: hidden;
					overflow-x: scroll;
				}
				
				&_logistics {
					font-size: 14px;
					color: #acacac;
					margin: 20px 0;
					margin-right: 20px;
					word-break:keep-all;       /* 不换行 */
					white-space:nowrap;        /* 不换行 */
					.packageBox{
						display: inline-block;
						padding: 0 10px;
						background-color: #FFC102;
						border-radius: 4px;
						color: #fff;
					}
					&_top {
						
						i {
							font-style: normal;
							color: #101010;
						}
					}
					
					&_center {
						margin: 5px 0;
						i {
							font-style: normal;
							color: #101010;
						}
						
						.i_active {
							color: #25A9FB;
							margin-left: 10px;
							cursor:  pointer;
						}
					}
					
					&_bottom {
						
						i {
							font-style: normal;
							color: #101010;
						}
					}
				}
				
				&_center {
					
					i {
						font-size: 14px;
						color: #25A9F8;
						font-style: normal;
						margin: 0px 20px;
						cursor: pointer;
						
						&:first-child {
							margin-left: 0;
						}
					}
					
					.refund {
						width: 80px;
						background: #FC4556;
					}
				}
				
				&_botton {
					font-size: 14px;
					color: #ACACAC;
					margin-top: 10px;
				}
			}
			
			&_text {
				flex: 1;
				padding: 30px;
				font-size: 14px;
				color: #101010;
				border-right: 1px solid rgba(#101010,0.1);
				
				&_font {
					margin-top: 30px;
					
					&:first-child {
						margin-top: 0;
					}
				}
				
				&_title {
					margin-top: 3px;
					
					&_box {
						display: flex;
						color: #acacac;
						margin-top: 5px;
						
						&_left {
							width: 60px;
							text-align: left;
						}
						
						&_right {
							display: flex;
							align-items: center;
							
							i {
								display: block;
								width: 16px;
								height: 16px;
								margin-left: 6px;
								border: 1px solid rgba(#101010,0.4);
								border-radius: 50%;
								background: #fff;
								font-size: 6px;
								text-align: center;
								line-height: 14px;
								color: rgba(#101010,0.4);
								font-style: normal;
								cursor: pointer;
							}
						}
						
						.text_active {
							color: #25A9FB;
						}
					}
				}
			}
		}
		
		.table_text {
			margin-top: 20px;
		}
		
		&_bottom {
			width: 100%;
			margin-top: 20px;
			border: 1px solid rgba(#101010,0.1);
			
			table {
				width: 100%;
				tr {
          width: 100%;
					display: flex;
					border-bottom: 1px solid rgba(#101010,0.1);
					
					th {
						height: 40px;
						line-height: 40px;
						
						&:nth-child(1),
						&:nth-child(2){
							text-align: left;
							padding-left: 20px;
						}
					}
					
					.td_active {
						justify-content: flex-start;
						padding-left: 20px;
					}
					
					td {
						height: 120px;
						display: flex;
						justify-content: center;
						align-items: center;
						border-right: 1px solid rgba(#101010,0.1);
						font-size: 14px;
						
						.tab_img {
							width: 50px;
							height: 50px;
							border: 1px solid rgba(#101010,0.1);
						}
						
						.tab_right {
							width: 130px;
							margin-left: 10px;
							
							&_title {
								width: 140px;
								font-size: 14px;
								color: #101010;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space:nowrap;
							}
							
							&_invoice {
								width: 70px;
								height: 20px;
								border-radius: 2px;
								color: #fff;
								font-size: 14px;
								text-align: center;
								line-height: 20px;
								background: #FC4556;
							}
						}
						
						.tab_box {
							
							&_content {
								font-size: 14px;
								margin-top: 5px;
								
								&:first-child {
									margin-top: 0;
								}
								
								.tab_spec {
									display: inline-block;
									padding: 0px 5px;
									text-align: center;
									border-radius: 2px;
									background: #25A9FB;
									font-size: 14px;
									color: #fff;
									margin-top: 5px;
									i{
										font-style: normal;
									}
								}
							}
						}
					}
				}
			}
		
      .price {
        display: flex;
        flex-direction: column;
				width: 100%;
				padding: 10px 0px 10px 0;
				
				&_box {
					display: flex;
					justify-content: flex-end;
					margin-top: 5px;
					
					&:first-child {
						margin-top: 0;
					}
          &:last-child {
              .box-center{
                margin: 0 20px;
              }
              .box-right{
                margin-right: 20px;
              }
					}
					
					&_left {
						width: 100px;
						font-size: 14px;
						text-align: right;
					}
					
					&_right {
						width: 100px;
						font-size: 14px;
					}
					
					.price_active {
						color: #F60F32;
					}
				}
			}
		}
	}
}